<template>
  <div class="manage">
    <CommonSearch :modal="searchForm" :searchConfig="searchConfig">
      <el-form-item>
        <el-button type="primary" @click="add('add')">新增</el-button>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item></CommonSearch
    >
    <el-table :data="tableData" class="manage-table">
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :formatter="item.formatter"
      >
        <template #default="scope">
          <img
            v-if="item.prop === 'avatarUrl'"
            :src="scope.row.avatarUrl"
            alt=""
            width="40"
            height="40"
          />
          <!-- <div
            v-else-if="
              item.prop === 'lastLoginTime' || item.prop === 'registrationTime'
            "
          ></div> -->
          <div v-else>
            {{ scope.row[item.prop] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row, scope.$index)"
            type="text"
            size="small"
            >修改</el-button
          >
          <el-button @click="deleteRow(scope.$index)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="tableData.length" :pagers="pagers"></el-pagination>
    <Dialog
      ref="Dialog"
      :modal="editItem"
      :searchConfig="searchConfig"
      :rules="rules"
      @cancel="cancel"
    ></Dialog>
  </div>
</template>

<script>
import CommonSearch from "@/components/CommonSearch.vue";
import searchMixin from "@/minixs/index";
import Dialog from "@/components/dialog.vue";
import { getUserList } from "@/api/user";
export default {
  components: { CommonSearch, Dialog },
  mixins: [searchMixin],
  data() {
    return {
      searchForm: {
        avatarUrl: "",
        doorId: null,
        email: "",
        gender: "",
        idNumber: "",
        introduction: "",
        lastLoginTime: "",
        nickName: "",
        phoneNumber: "",
        registrationTime: "",
        remark: "",
        roleId: null,
        status: null,
        userId: null,
        username: "",
      },
      searchConfig: [
        {
          value: "nickName",
          component: "el-input",
          label: "昵称",
        },
      ],
      editItem: {
        avatarUrl: "",
        doorId: null,
        email: "",
        gender: "",
        idNumber: "",
        introduction: "",
        lastLoginTime: "",
        nickName: "",
        phoneNumber: "",
        registrationTime: "",
        remark: "",
        roleId: null,
        status: null,
        userId: null,
        username: "",
      },
      columns: [
        // 表头
        {
          prop: "username",
          label: "用户名",
        },
        {
          prop: "nickName",
          label: "昵称",
        },
        {
          prop: "phoneNumber",
          label: "电话号码",
        },
        {
          prop: "email",
          label: "邮箱",
        },
        {
          prop: "doorId",
          label: "房号",
        },
        {
          prop: "avatarUrl",
          label: "头像",
        },
        {
          prop: "introduction",
          label: "简介",
        },
        {
          prop: "registrationTime",
          label: "注册时间",
        },
        {
          prop: "remark",
          label: "备注",
        },
      ],
      tableData: [],
      rules: {
        // 校验规则
      },
    };
  },
  methods: {
    add(type) {
      this.$refs.Dialog.open(type);
    },
    edit(item) {
      this.editItem = { ...item };
      this.add("edit");
    },
    deleteRemote(index) {
      // 删除接口
      this.$message.success("操作成功");
    },
    async tableRemote() {
      // 查询接口
      const res = await getUserList({
        ...this.pager,
        params: {
          roleId: 3,
          status: 0,
        },
      });
      return res;
    },
  },
  mounted() {
    this.search();
  },
};
</script>

